<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
  <div class="min-h-screen bg-gray-50 p-6">
    <CaseSelect :caseSelectItem="caseSelectItem" @change="handleCaseChange" />
  </div>

  <div class="min-h-screen bg-gray-50 p-6">
    <AppsButton :urlList="urls" class="max-w-6xl mx-auto" @app-selected="handleAppSelected" />
  </div>

  <div class="min-h-screen bg-gray-50 p-6">
    <AppQuery :queryName="queryName" :queryUrl="queryUrl" :initialParams="[{ key: queryKey, value: caseClue }]"
      :caseClue="caseClue" />
  </div>
</template>

<script>
import CaseSelect from './components/CaseSelect.vue'
import AppsButton from './components/AppsButton.vue'
import AppQuery from './components/AppQuery.vue'

export default {
  name: 'App',
  components: {
    CaseSelect,
    AppsButton,
    AppQuery
  },
  data() {
    return {
      urls: [],  // 存储从AppButton对应后端获取的数据
      appSelectedItem: null, //存储点击APPs时候获取对应的url的值
      caseSelectItem: null,
      clue: "", // 接收CaseSelect中的clue的值
      queryName: "",
      queryUrl: "",
      queryKey: "",
      caseClue: "",
    }
  },
  methods: {
    async fetchAppsData() {
      // fetchData() {
      try {
        // 模拟API调用 - 实际项目中替换为真实API调用
        // const response = await fetch('https://api.example.com/urls')
        // 模拟返回的结果
        const response = [
          {
            name: '百度',
            url: 'https://www.baidu.com',
            icon: 'fas fa-search',
            queryKey: 'ceco'
          },
          {
            name: 'GitHub',
            url: 'https://github.com',
            icon: 'fab fa-github',
            queryKey: 'tel'
          },
          {
            name: '知乎',
            url: 'https://www.zhihu.com',
            icon: 'fas fa-question-circle',
            queryKey: 'ceco'
          },
          {
            name: 'B站',
            url: 'https://www.bilibili.com',
            icon: 'fas fa-play-circle',
            queryKey: 'ceco'
          },
          {
            name: '淘宝',
            url: 'https://www.taobao.com',
            icon: 'fas fa-shopping-cart',
            queryKey: 'ceco'
          },
          {
            name: '京东',
            url: 'https://www.jd.com',
            icon: 'fas fa-box',
            queryKey: 'ceco'
          }
        ]
        // if (!response.ok) {
        //   throw new Error('网络响应不正常')
        // }
        this.urls = await response
        // this.urlList = data.urls.map(item => ({
        //   name: item.name,
        //   url: item.url,
        //   icon: item.icon || 'fas fa-link'
        // }))
      } catch (err) {
        err.message
      }
    },
    // APP选中后的操作
    handleAppSelected(item) {
      this.appSelectedItem = item
      console.log('接收到APPS子组件数据:', item)

      console.log('接收到APPS子组件Name:', item.name)
      this.queryName = item.name
      console.log('接收到APPS子组件URL:', item.url)
      this.queryUrl = item.url
      console.log('接收到APPS子组件Name:', item.queryKey)
      this.queryKey = item.queryKey
    },
    // 案件选中后的操作
    handleCaseChange(item) {
      console.log('接收到案管子组件数据:', item)
      this.caseSelectItem = item

      console.log('接收到案管子组件线索值:', item.caseClue)
      this.caseClue = item.caseClue
    }
  },
  created() {
    // 组件创建时自动获取数据
    this.fetchAppsData()
  }
}


</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
